<template>
    <div id="lightKindsDiv">
      <div class="tableDiv">
        <div class="header">
          <Button class="buttonDiv addButton" type="warning" icon="md-add" @click="addModal=true">添加</Button>
        </div>
        <div class="body">
          <Table
            :loading="tableLoading"
            :columns="tableColumns"
            :data="tableData"
            @on-selection-change="tableChose"
            border
          >
            <template
              slot="action"
              slot-scope="{ row ,index }">
              <!--修改-->
              <Button shape="circle" size="small" icon="md-create" type="primary" @click="updateLine(row)" style="margin-right: 15px"></Button>
              <!--删除-->
              <Button shape="circle" size="small" icon="ios-trash" type="error" @click="deleteLine(row)"></Button>
            </template>

            <template
              slot="type"
              slot-scope="{ row ,index }">
              <Button type="primary" v-if="row.isDefault==1" size="small" ghost style="width: 4em" >默认</Button>
              <Button type="success" size="small" ghost style="width: 4em" @click="undateDefault(row)" v-else>非默认</Button>
            </template>
          </Table>
        </div>
        <div class="footer">
          <div class="commonFooterBtn">
            <Button class="buttonDiv" :disabled="tableChoseList.length<=0" @click="deleteChose" icon="ios-trash-outline" type="error">删除</Button>
          </div>
          <div class="commonFooterPage">
            <Page class="pageLine" :total="pageMsg.pageTatol" :page-size="pageMsg.pageSize" :current="pageMsg.pageNo" @on-change="pageChange"/>
          </div>
        </div>

      </div>
      <Modal
        v-model="addModal"
        @on-cancel="cancalTableForm('addMsg')"
      >
        <div class="userModalHeader" slot="header">
          <span>添加</span>
        </div>
        <div>
          <Form :model="formModal" ref="addMsg" :rules="formMsgRule" :label-width="100">
            <FormItem label="种类：" prop="kindName">
              <Input v-model="formModal.kindName" placeholder="请输入新增种类"/>
            </FormItem>
            <FormItem label="英文名：" prop="kindName">
              <Input v-model="formModal.enkindName" placeholder="请输入新增种类"/>
            </FormItem>
            <FormItem label="区域：" prop="area">
              <Select v-model="formModal.areaId" style="width:100%">
                <Option v-for="item in areaList" :value="item.pkid" :key="item.pkid">{{ item.areaName }}</Option>
              </Select>
            </FormItem>
          </Form>
        </div>
        <div slot="footer" class="userModalFooter">
          <Button icon="" type="default" @click="addModal=false;cancalTableForm('addMsg')">取消</Button>
          <Button icon="" type="primary" @click="addSubmit">保存</Button>
        </div>
      </Modal>



      <!--修改框-->
      <Modal
        v-model="updateModal"
        @on-cancel="cancalTableForm('updateMsg')"
      >
        <div class="modalHeader" slot="header">
          <span>修改</span>
        </div>
        <div>
          <Form :model="formModal" ref="updateMsg" :rules="formMsgRule" :label-width="100">
            <FormItem label="区域：" prop="kindName">
              <Input v-model="formModal.kindName" placeholder="请输入修改区域"/>
            </FormItem>
            <FormItem label="英文名：" prop="kindName">
              <Input v-model="formModal.enkindName" placeholder="请输入新增种类"/>
            </FormItem>
            <FormItem label="区域：" prop="area">
              <Select v-model="formModal.areaId" style="width:100%" @on-change="areaChange">
                <Option v-for="item in areaList" :value="item.pkid" :key="item.pkid">{{ item.areaName }}</Option>
              </Select>
            </FormItem>
          </Form>
        </div>
        <div slot="footer" class="userModalFooter">
          <Button icon="" type="default" @click="updateModal=false;cancalTableForm('updateMsg')">取消</Button>
          <Button icon="" type="primary" @click="updateSubmit">保存</Button>
        </div>
      </Modal>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
          const validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请填写地区'));
            } else {
              this.$app.post('/lightKinds/examineLightKinds', {
                kindName:value
              }).then((res)=>{
                if(res.data.code==0){
                  callback();
                }else{
                  callback(new Error('重复地区'));
                }
                // console.log(res);
              }).catch((res)=>{
                //console.log(response);
              });

            }
          };
          return{
            addModal:false,
            updateModal:false,
            tableLoading:false,
            tableChoseList:[],
            areaList:[
              {pkid:0,areaName:"亚洲"}
            ],
            pageMsg:{
              pageNo:1,//当前页
              pageSize:10,//每页行数
              pageTatol:12,//总数
            },
            formModal:{
              pkid:0,
              kindName:'',
              enkindName:'',
              areaId:0,
              tAreaJoinLightKindsId:0,//关联Id
            },
            formMsgRule:{
              kindName: [
                { required: true, message: '请输入种类名', trigger: 'blur' },
                // { validator: validatePass, trigger: "blur" },
              ],
                enkindName: [
                    { required: true, message: '请输入种类名', trigger: 'blur' },
                ],
            },
            tableData:[

            ],
            tableColumns: [
              {
                type: 'selection',
                width: 60,
                align: 'center'
              },
              {
                title:"产品种类",
                key:"kindName",
                align: 'center'
              },
              {
                  title:"英文名称",
                  key:"enkindName",
                  align: 'center'
              },
              {
                title:"是否默认",
                slot:"type",
                align: 'center',
                width: 150
              },
              {
                title: "操作",
                align: "center",
                slot: "action",
                width: 200,
              },
            ]
          }
        },
      methods:{
        //选择框选择
        tableChose(selection, row){
          this.tableChoseList=selection
        },
        //点击修改按钮
        updateLine(row){
          this.formModal=JSON.parse(JSON.stringify(row));
          this.updateModal=true;
        },
        //修改默认值
        undateDefault(row){
          let that=this;

          this.$app.post('/lightKinds/updateDefaultLightKinds', {
            pkid:row.pkid
          }).then((res)=>{
            if(res.data.code==0){
              that.$Message.success("修改成功");
              that.getAllTableData();
            }
            // console.log(res);
          }).catch((res)=>{
            //console.log(response);
          });
        },
        //删除单选
        deleteLine(row){
          // console.log("点击了删除::",row);
          let that=this;
          // console.log("删除：：",);
          this.$app.post('/lightKinds/deleteLightKinds', {
            pkids:[row.pkid]
          }).then((res)=>{
            if(res.data.code==0){
              that.$Message.success("删除成功");
              that.getAllTableData();
              // that.tableChoseList=[];
            }else{
              that.$Message.error("删除失败")
            }


            // console.log(res);
          }).catch((res)=>{
            //console.log(response);
          });

        },
        //删除多选
        deleteChose(){
          let that=this;
          // console.log("删除：：",);
          this.$app.post('/lightKinds/deleteLightKinds', {
            pkids:that.tableChoseList.map(item => item.pkid)
          }).then((res)=>{
            if(res.data.code==0){
              that.$Message.success("删除成功");
              that.getAllTableData();
              that.tableChoseList=[];
            }else{
              that.$Message.error("删除失败")
            }
            // console.log(res);
          }).catch((res)=>{
            //console.log(response);
          });

        },
        //清除form数据
        cancalTableForm(name){
          // this.formItem.deviceID = null;
          this.$refs[name].resetFields();
        },
        //添加修改
        addSubmit(){
          // console.log(this.formModal);
          let that=this;
          this.$refs["addMsg"].validate(valid => {
            if(valid){
              this.$app.post('/lightKinds/addLightKinds', that.formModal).then((res)=>{
                if(res.data.code==0){
                  that.$Message.success("添加成功");
                  that.getAllTableData();
                }else{
                  that.$Message.error("添加失败")
                }

                that.cancalTableForm('addMsg');
                that.addModal=false;
                // console.log(res);
              }).catch((res)=>{
                //console.log(response);

                that.cancalTableForm('updateMsg');
                that.updateModal=false;
              });

            }
          })
        },
        //提交修改
        updateSubmit(){
          // console.log(this.formModal);
          let that=this;
          this.$refs["updateMsg"].validate(valid => {
            if(valid){
              that.$app.post('/lightKinds/updateLightKinds',that.formModal).then((res)=>{
                if(res.data.code==0){
                  that.$Message.success("修改成功");
                  that.getAllTableData();

                }else{
                  that.$Message.error("修改失败");

                }

                that.cancalTableForm('updateMsg');
                that.updateModal=false;
                // console.log(res);
              }).catch((res)=>{
                //console.log(response);
                that.cancalTableForm('updateMsg');
                that.updateModal=false;
              });

            }
          })
        },
        pageChange(pageNum){
          this.pageMsg.pageNo=pageNum
          this.getAllTableData();
        },
        getAllAreaData(){
          var that=this;
          return new Promise(resolve => {

              this.$app.post('/area/getAreaPage', {}).then((res)=>{
                  if(res.data.code==0){
                      that.areaList=res.data.data.list;
                  }

                  resolve();
              })
          })

        },
        //地区选择改变
        areaChange(areaId){
          let that=this;
          this.$app.post('/lightKinds/updateLightKindsArea', {
            pkid:that.formModal.pkid,
            areaId:areaId,
            tAreaJoinLightKindsId:that.formModal.tAreaJoinLightKindsId
          }).then((res)=>{
              if(res.data.code==0){
                  that.$Message.success("修改成功");
                  that.getAllTableData();
                  // that.tableData=res.data.data.list;
                  // that.pageMsg.pageTatol=res.data.data.total;
              }
              // console.log(res);
          })
        },
        getAllTableData(){
          var that=this;

          this.$app.post('/lightKinds/getLightKindsPage', {
            pageNo:that.pageMsg.pageNo,
            pageSize: that.pageMsg.pageSize
          }).then((res)=>{
            if(res.data.code==0){
              that.tableData=res.data.data.list;
              that.pageMsg.pageTatol=res.data.data.total;
            }
            // console.log(res);
          })
        },
      },
      mounted() {
        let that=this;

        this.getAllTableData();
        this.getAllAreaData().then(()=>{
            var defaultItem=that.areaList.find((item)=>{
                return (item.isDefault==1)
            });
            if(defaultItem == null){
                defaultItem=that.areaList[0];
            }

            that.formModal.areaId=defaultItem.pkid;
        });
      }
    }
</script>

<style lang="less" scoped>
  #lightKindsDiv{
    width: 100%;
    height: 100%;

    &>.tableDiv{
      .header{
        &>.buttonDiv{
          margin: .5rem 0 .5rem .5rem;
        }
        &>.addButton{

        }
      }

      .body{
        margin:0 0.5rem;
      }
      .footer{
        .commonFooterBtn,.commonFooterPage{
          margin: .5rem;
        }
        .commonFooterBtn{
          float: left;
        }
        .commonFooterPage{
          float: right;
        }
      }
    }
  }
</style>
